<template>
  <!-- 供应商首页 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>企业数据看板</p>
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-row :gutter="15">
        <el-col :span="6">
          <el-row :gutter="10" class="project-show marginT35">
            <el-col :span="12">
              <div class="item">
                <p>{{ proAllMoneyAndAmount.proCount || 0 }}(个)</p>
                <p>项目总数</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item">
                <p>{{ proAllMoneyAndAmount.contractAmount || 0 }}(万元)</p>
                <p>项目总合同额</p>
              </div>
            </el-col>
          </el-row>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>不同地貌的项目统计</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="24">
                <EchartsPie radius="55" :center="['50%', '65%']" height="240px" :data="[...LandTypedata]" :legend="[...Landlegengd]" />
              </el-col>
              <el-col :span="24">
                <EchartsPie radius="55" :center="['50%', '65%']" height="240px" :data="[...ProjectTypedata]" :legend="[...Typelegengd]" />
              </el-col>
            </el-row>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>近一年的项目数</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EchartsOneBarLine :pro-info-count-by-month="proInfoCountByMonth" height="230px" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="map">
            <div class="bar-img" />
            <h3 class="title">项目分布</h3>
            <div class="cont">
<!--              <EcharsMap :points="centerXY" height="560px" />-->
              <!--高德地图-->
              <Amap :points="centerXY" height="560px" />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>施工中的项目</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <ProjectTable :list-data="supplierIndexVos" :list-header="InglistHeader" height="180px" />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>合作的企业</span>
              <span class="more" @click="goCooperateSupplier()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <ProjectTable :pro-grade="proGrade" type="cooperation" :limit-move-num="15" :list-data="teamEnterpriseList" :list-header="LevellistHeader" height="520px" />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>设备统计</span>
              <span class="more" @click="goEquipment()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EchartsOneBar x-axis-name="设备类型" :count-exploration="equipmenTypeList" height="220px" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>

import { mapState } from 'vuex'
import { supplierStatistics } from '@/api/home'
// import EcharsMap from '@/components/EchartsComponents/EcharsMap'
/** 高德地图 start*/
import Amap from '@/components/EchartsComponents/Amap'
/** 高德地图 end*/
import EchartsOneBar from '@/components/EchartsComponents/EchartsOneBar'
import EchartsOneBarLine from './components/EchartsOneBar'
import EchartsPie from '@/components/EchartsComponents/EchartsPie'
import ProjectTable from './components/ProjectTable'
export default {
  name: 'SupplierIndex',
  components: {
    EchartsOneBarLine,
    ProjectTable,
    EchartsPie,
    EchartsOneBar,
    Amap
    // EcharsMap
  },
  data() {
    return {
      // 近一年项目数
      proInfoCountByMonth: [],
      // 项目类型图形数据
      Typelegengd: [],
      ProjectTypedata: [{ name: '无', value: 0, proportion: 0, price: 0 }],
      // 地区类型图形数据
      LandTypedata: [{ name: '无', value: 0, proportion: 0, price: 0 }],
      Landlegengd: [],
      // 设备类型图形数据
      equipmenTypeList: [],
      // 合作的企业表格数据
      teamEnterpriseList: [],
      LevellistHeader: [
        { name: '公司名称' },
        { name: '公司资质' },
        { name: '公司地址' }
      ],
      // 施工中的项目表格数据
      centerXY: [], // 经纬度
      supplierIndexVos: [],
      InglistHeader: [
        { name: '项目名称' },
        { name: '钻孔总数' },
        { name: '已完成钻孔' },
        { name: '未完成钻孔' },
        { name: '总合同额(万元)' }
      ],
      // 项目数量
      proAllMoneyAndAmount: {
        proCount: 0,
        contractAmount: 0
      }
    }
  },
  computed: {
    ...mapState({ proGrade: state => state.basicInfo.proGrade })
  },
  mounted() {
    this.getList()
    console.log(this.proGrade)
  },

  methods: {
    async getList() {
      const { data } = await supplierStatistics()
      if (data) {
        // 近一年的项目数
        this.proInfoCountByMonth = data.proInfoSupperVoListYearMonth.map(item => ({ count: item.count, days: item.time }))
        // 项目类型
        this.ProjectTypedata = data.proInfoSuperviseVoListByProTypeId.map(item => {
          const { proNum, proportion, regionTypeName, totalAmount } = item
          this.Typelegengd.push(regionTypeName)
          return { name: regionTypeName, value: proNum, proportion, price: this.divideMoney(totalAmount, 6, true) }
        })
        // 地区类型
        this.LandTypedata = data.proInfoSuperviseVoListByRegion.map(item => {
          const { proNum, proportion, regionTypeName, totalAmount } = item
          this.Landlegengd.push(regionTypeName)
          return { name: regionTypeName, value: proNum, proportion, price: this.divideMoney(totalAmount, 6, true) }
        })
        // 项目数量
        this.proAllMoneyAndAmount = {
          proCount: data.proAllMoneyAndAmount[0].proCount,
          contractAmount: this.divideMoney(data.proAllMoneyAndAmount[0].contractAmount, 6, true)
        }
        // 施工中项目
        this.supplierIndexVos = data.supplierIndexVos
        // 地图生成坐标点
        this.centerXY = data.supplierIndexVos.map(item => {
          const { proNum, proName, workload, finishWorkload } = item
          return { lon: item.x, lat: item.y, proNum, proName, workload, finishWorkload }
        })
        // 近一年项目数
        // 合作的企业
        this.teamEnterpriseList = data.teamEnterpriseList
        // 设备类型
        this.equipmenTypeList = data.sysEquipmentLists.map(item => ({ equipmentTypeName: item.name, countEquipment: item.count }))
      }
    },
    // 项目列表
    goProject() {
      this.$router.push({
        path: '/statisticalAnalysis/project'
      })
    },
    // 人员列表
    goPersonal() {
      this.$router.push({
        path: '/resourceManage/user'
      })
    },
    // 设备列表
    goEquipment() {
      this.$router.push({
        path: '/resourceManage/equipment'
      })
    },
    // 合作企业列表
    goCooperateSupplier() {
      this.$router.push({
        path: '/resourceManage/cooperativeEnterprise'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>
